<template>
  <div class="login">
  	<div class="video-frame">
	  <div class="video-overlay"></div>
	  <video autoplay="autoplay" loop="loop" :poster="cdn +'homepage-hero-video-desktop-still.jpg'"> <!--  -->
      <!-- 实际部署可以考虑将这些资源部署在cdn上 -->
	    <source class="webm" type="video/webm" :src="cdn +'homepage-hero-video.webm'">
      <source class="mp4" type="video/mp4" :src="cdn +'homepage-hero-video.mp4'">
	  </video>
	  <img :src="cdn +'homepage-hero-video-desktop-still.jpg'" class="mobile-fallback" alt="" style="display: none;">
	</div>
  	<div class="login-form">
  		<img :src="cdn + 'dadiLoginLogo.svg'" width="300" style="margin-bottom:30px">
      <!-- <h3>费用尽在掌控、简洁而不简单</h3> -->
	    <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm" >
		  <el-form-item prop="username">
		    <input
          class="el-input__inner"
          type="text"
          placeholder="账户/邮箱/手机号"
          v-model="ruleForm.username"
          auto-complete="off"
          @keyup.enter="submitForm('ruleForm')">
		  </el-form-item>
		  <el-form-item prop="password">
		    <input
          class="el-input__inner"
          type="password"
          placeholder="密码"
          v-model="ruleForm.password"
          auto-complete="off"
          @keyup.enter="submitForm('ruleForm')">
		  </el-form-item>
		  <el-form-item v-if="validateCode" prop="validateCode">
		    <el-input placeholder="请输入验证码" v-model.number="ruleForm.validateCode">
		    	<template slot="append">验证码</template>
		    </el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" :loading="submitLoading" @click="submitForm('ruleForm')">登录</el-button>
		  </el-form-item>
		</el-form>
	</div>
  </div>
</template>

<script>
export default {
  name: 'login',
  mixins: [
    {
      userName: '',
    },
  ],
  data() {
    return {
      cdn: `${window.location.protocol}//${window.location.host}/3.0/`,
      root: `${window.location.protocol}//${window.location.host}/`,
      ruleForm: {
        username: '',
        password: '',
        validateCode: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入账户名称', trigger: 'blur,change' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur,change' },
        ],
        validateCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 4, max: 4, message: '验证码长度为 4 个字符', trigger: 'blur' },
        ],
      },
      submitLoading: false,
      validateCode: false,
      parmas: {},
    };
  },
  mounted() {
    // this.$cookie.set('messageSwitch', 'false');
    if (window.location !== `${this.root}FMC/index/#/`) {
      window.location = `${this.root}FMC/index/#/`;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          Object.assign(this.parmas, this.ruleForm);
          this.submitLoading = true;
          await this.$http.post('checkCorpByMoblie.ajax', { account: this.parmas.username }).then(
            (res) => {
              res = res.body;

              if (res.rspData) {
                if (res.rspData.length > 1) {
                  this.$message(res.rspMsg);
                } else if (res.rspData.length > 0) {
                  this.parmas.corpid = res.rspData[0].id;
                  this.parmas.account = `${this.parmas.corpid},${this.parmas.username}`;
                  this.parmas.synSource = res.rspData[0].synSource;
                }
                this.loginAction();
              }
            },
            () => {
              this.submitLoading = false;
            },
          );
        }
      });
    },
    loginAction() {
      const params = Object.assign({}, this.parmas, { channelcode: 'VUE' });
      this.$http.post('loginAction', params).then(
        () => {
          this.$router.push('portal');
        },
        () => {
          this.submitLoading = false;
        },
      );
    },
  },
};
</script>


<style lang="scss">
.login{
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  .video-frame{
    height: 100%;
    width: 100%;
    background-color: #000;
  }
  video{
    object-fit: contain;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .login-form{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    z-index:3;
    margin: 0px auto 0px;
    width: 50%;
    max-width: 600px;
    min-width: 300px;
    .el-button{
      width:100%;
      height: 50px;
      font-size: 20px;
    }
    input {
      height: 50px;
      font-size: 20px;
      font-weight: lighter;
    }
  }
  h1{
    color: #fff;
    font-size: 50px;
    font-weight: bolder;
    margin-bottom: 30px;
  }
  h3{
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 30px;
  }
  .video-overlay{
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    z-index:2
  }
}
</style>
